<template>
	<el-dialog :visible.sync="visible" title="PEDC固件升级" :close-on-click-modal="false" :close-on-press-escape="false"
		@close="close">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="pedc" label="pedc">
				<el-select v-model="dataForm.pedc">
					<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-checkbox-group v-model="dataForm.pedc">
				<el-checkbox v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-checkbox>
			</el-checkbox-group> -->
			<!-- <el-form-item  label="">
				<el-checkbox v-model="dataForm.pedca" style="margin-right: 20px;">PEDCA</el-checkbox>
				<el-select v-model="dataForm.pedcaCpu">
					<el-option v-for="(item,index) in optionsCPU" :key="index" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
	        </el-form-item>
			<el-form-item>
				<el-checkbox v-model="dataForm.pedcb" style="margin-right: 20px;">PEDCB</el-checkbox>
				<el-select v-model="dataForm.pedcbCpu">
					<el-option v-for="(item,index) in optionsCPU" :key="index" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
			</el-form-item> -->
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
		<div v-if="loading" class="loadingContent el-loading-mask">
			<div @click="closeLoading" class="loadingClose"></div>
			<div class="el-loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
				<p class="el-loading-text" style="font-size: 20px;">{{ loadingMsg }}</p>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
	data() {
		return {
			visible: false,
			dataForm: {
				id: '',
				// pedc:[],
				pedc: '',
				// pedca:'',
				// pedcb:'',
				// pedcaCpu:'',
				// pedcbCpu:''
			},
			options: [
				{
					value: 0,
					label: 'pedca'
				},
				{
					value: 1,
					label: 'pedcb'
				}
			],
			optionsCPU: [
				{
					value: 0,
					label: 'cpu0'
				},
				{
					value: 1,
					label: 'cpu1'
				}
			],
			loading: false,
			loadingMsg: '',
		}
	},
	computed: {
		dataRule() {
			return {
				pedc: [
					{ required: true, message: 'PEDC不能为空', trigger: 'blur' }
				],
			}
		}
	},
	beforeDestroy() {
		window.clearTimeout()
	},
	methods: {
		close() {
			this.dataForm = {
				id: '',
				// pedc:[],
				pedc: '',
				// pedca:'',
				// pedcb:'',
				// pedcaCpu:'',
				// pedcbCpu:''
			}
		},
		init(id, status) {
			this.visible = true
			this.dataForm.id = id
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
			})
		},
		// 表单提交
		dataFormSubmitHandle: debounce(function () {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false
				}
				// this.dataForm.pedc.forEach((k) => {
				// 	if(k === 'PEDCA'){
				// 		this.dataForm.pedca = k.toLowerCase()
				// 	}
				// 	if(k === 'PEDCB'){
				// 		this.dataForm.pedcb = k.toLowerCase()
				// 	}
				// })
				// var obj = {
				// 	upGradeId:this.dataForm.id,
				// 	pedca:this.dataForm.pedca?'pedca':'',
				// 	pedcb:this.dataForm.pedcb?'pedcb':'',
				// 	pedcaCpu:this.dataForm.pedcaCpu,
				// 	pedcbCpu:this.dataForm.pedcbCpu
				// }
				var obj = {
					upGradeId: this.dataForm.id,
					pedc: this.dataForm.pedc
				}
				this.loading = true
				var that = this
				//准备命令
				this.command(obj)
					.then(function (data) {
						if (data == 1) {
							return that.start(obj);
						} else {
							that.loading = false
							that.visible = false
						}

					})
					// .then(function(data){
					//  if(data==1){
					//     return that.check(obj);
					//  }else{
					//  	that.loading = false
					//  	that.visible = false
					//  }

					// })
					.then(function (data) {
						if (data == 1) {
							return that.restart(obj);
						} else {
							that.loading = false
							that.visible = false
						}

					})
					.then(function (data) {
						if (data == 1) {
							that.loading = false
							that.visible = false
						} else {
							that.loading = false
							that.visible = false
						}

					})
				// this.$http.post('/psc/cmd/upgrade', obj).then((res) => {
				// 	if (res.data.code !== 0) {
				// 		return this.$message.error(res.data.msg)
				// 	}
				// 	this.$message({
				// 		message: this.$t('prompt.success'),
				// 		type: 'success',
				// 		duration: 500,
				// 		onClose: () => {
				// 			this.visible = false
				// 			this.loading = true

				// 			// this.$emit('refreshDataList')
				// 		}
				// 	})
				// }).catch(() => {})
			})
		}, 1000, { 'leading': true, 'trailing': false }),
		//准备命令
		command(data) {
			this.loadingMsg = '准备命令'
			var that = this
			var p = new Promise(function (resolve, reject) {        //做一些异步操作
				that.$http.post('/psc/cmd/prepare', data).then(res => {
					if (res.data.code !== 0) {
						resolve('0');
						return that.$message.error(res.data.msg)
					}
					that.loadingMsg = res.data.data
					setTimeout(function () {
						resolve('1');
					}, 1000)

				})
			});
			return p;
		},
		// 开始命令
		start(data) {
			this.loadingMsg = '开始升级'
			var that = this
			var p = new Promise(function (resolve, reject) {        //做一些异步操作
				that.$http.post('/psc/cmd/start', data).then(res => {
					if (res.data.code !== 0) {
						resolve('0');
						return that.$message.error(res.data.msg)
					}
					that.loadingMsg = res.data.data
					setTimeout(function () {
						resolve('1');
					}, 1000)

				})
			});
			return p;
		},
		// 校验命令
		check(data) {
			this.loadingMsg = '校验命令'
			var that = this
			var p = new Promise(function (resolve, reject) {        //做一些异步操作
				that.$http.post('/psc/cmd/check', data).then(res => {
					if (res.data.code !== 0) {
						resolve('0');
						return that.$message.error(res.data.msg)
					}
					that.loadingMsg = res.data.data
					setTimeout(function () {
						resolve('1');
					}, 2000)

				})
			});
			return p;
		},
		//重启命令
		restart(data) {
			this.loadingMsg = '重启命令'
			var that = this
			var p = new Promise(function (resolve, reject) {        //做一些异步操作
				that.$http.post('/psc/cmd/restart', data).then(res => {
					if (res.data.code !== 0) {
						resolve('0');
						return that.$message.error(res.data.msg)
					}
					that.loadingMsg = res.data.data
					setTimeout(function () {
						resolve('1');
					}, 1000)

				})
			});
			return p;
		},
		//关闭弹窗
		closeLoading() {
			this.loading = false
			//去掉升级
			this.$http.get("psc/cmd/upgradeStop").then((res) => {
				if (res.data.code !== 0) {
					return that.$message.error(res.data.msg);
				}
				this.$message({
					message: res.data.msg,
					type: "success",
					duration: 3000,
				});
			})
		},
	}
}
</script>

<style scoped>
.loading {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
}

.loading>>>.el-loading-mask {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

.loadingContent {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999999;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.loadingClose {
	position: absolute;
	width: 20px;
	height: 20px;
	cursor: pointer;
	top: 20px;
	right: 20px;
}

.loadingClose:before {
	position: absolute;
	content: "";
	width: 2px;
	height: 25px;
	background: #fff;
	transform: rotate(45deg);
	top: -3px;
	left: 11px;
}

.loadingClose:after {
	content: "";
	position: absolute;
	width: 2px;
	height: 25px;
	background: #fff;
	transform: rotate(-45deg);
	top: -3px;
	left: 11px;
}
</style>